<template>
  <div class="pc" v-if="store.state.isPc">
    <div class="header">{{ servetitle }}</div>
    <div class="noticedetails">
      <div class="container">
        <div class="breadcrumb">
          <el-breadcrumb separator="》">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              :to="{
                path: '/download',
                query: {
                  class_id: $route.query.class_id,
                  name: $route.query.name,
                  type: $route.query.type,
                },
              }"
              >{{ $route.query.name }}</el-breadcrumb-item
            >
            <el-breadcrumb-item>详情</el-breadcrumb-item>
          </el-breadcrumb>
          <el-button round @click="goback">返回</el-button>
        </div>

        <div class="title">
          <p>{{ details.value?.name }}</p>
        </div>
        <div class="info">
          <span>
            发布时间：{{ timestampToTime(details.value?.create_time) }}</span
          >
          <span
            >来源：<span class="sgreen">{{ details.value?.source }}</span></span
          >
        </div>
        <div class="content" v-html="details.value?.content"></div>

        <!-- <vue3videoPlay 
       v-if="details.value?.is_open=='1'"
      :controlBtns="['fullScreen']"
      :src="details.value?.flow"
      :type="playerOptions.type"
      class="vueplay"
      ></vue3videoPlay> -->

        <!-- <div class="cooperation" @click="godialog">
        我<br />
        要<br />
        合<br />
        作
      </div> -->
      </div>
    </div>

    <div class="foot">
      <div class="top">
        <p>
          指导单位：全国文化艺术职业教育教学指导委员会&nbsp;&nbsp;&nbsp;中国艺术职业教育学会
        </p>
        <p>
          主办单位：全国文化艺术职业教育教学指导委员会对外交流与合作专委会&nbsp;&nbsp;&nbsp;教学质量评价与保障专委会
        </p>
        <p>承办单位：深圳艺术学校&nbsp;&nbsp;&nbsp;浙江艺术职业学院</p>
        <p>技术支持单位：广州市晨旭教育评估有限公司</p>
      </div>
      <div class="bottom">
        <p>ICP备15112809号-2</p>
      </div>
      <el-dialog
        v-model="dialogVisible"
        width="435px"
        :show-close="false"
        :before-close="godialog"
        custom-class="eldia"
      >
        <div class="title">我要合作</div>

        <el-input v-model="obj.phone" placeholder="请输入联系方式" />
        <el-input v-model="obj.username" placeholder="请输入用户名称" />
        <el-input v-model="obj.school" placeholder="请输入学校名称" />
        <el-input
          v-model="obj.need"
          placeholder="请输入您的需求"
          show-word-limit
          type="textarea"
          rows="4"
        />
        <el-button type="primary" @click="sumbit">提交</el-button>
      </el-dialog>
    </div>
  </div>
  <div class="mob" v-else>
    <div class="header">{{ servetitle }}</div>
    <div class="noticedetails">
      <div class="container">
        <div class="breadcrumb">
          <el-breadcrumb separator="》">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              :to="{
                path: '/download',
                query: {
                  class_id: $route.query.class_id,
                  name: $route.query.name,
                },
              }"
              >{{ $route.query.name }}</el-breadcrumb-item
            >
            <el-breadcrumb-item>详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="title">
          <p>{{ details.value?.name }}</p>
        </div>
        <div class="info">
          <span>
            发布时间：{{ timestampToTime(details.value?.create_time) }}</span
          >
          <br />
          <span
            >来源：<span class="sgreen">{{ details.value?.source }}</span></span
          >
        </div>

        <div class="content" v-html="details.value?.content"></div>
        <!-- <div class="cooperation" @click="godialog">
        我<br />
        要<br />
        合<br />
        作
      </div> -->

        <vue3videoPlay
          v-if="details.value?.is_open == '1'"
          :controlBtns="['fullScreen']"
          :src="playerOptions.src"
          :type="playerOptions.type"
          class="vueplay"
        ></vue3videoPlay>
      </div>
    </div>

    <div class="foot">
      <p>
        指导单位：全国文化艺术职业教育教学指导委员会&nbsp;&nbsp;&nbsp;中国艺术职业教育学会
      </p>
      <p>
        主办单位：全国文化艺术职业教育教学指导委员会对外交流与合作专委会&nbsp;&nbsp;&nbsp;教学质量评价与保障专委会
      </p>
      <p>承办单位：深圳艺术学校&nbsp;&nbsp;&nbsp;浙江艺术职业学院</p>
      <p>技术支持单位：广州市晨旭教育评估有限公司</p>

      <p>ICP备15112809号-2</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, watch, ref, onMounted } from "vue";
import { newsDetails, cooperate, serveTitile } from "../../../api/api";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, messageConfig } from "element-plus";
import { timestampToTime } from "../../../utils/utils";
import viewplay from "../../../component/setting/info.vue";
import { useStore } from "vuex";
import "vue3-video-play/dist/style.css";
// import vue3videoPlay from "vue3-video-play";
let playerOptions = {
  type: "m3u8",
  src: "http://220.161.87.62:8800/hls/1/index.m3u8",
};
let $route = useRoute();
let $router = useRouter();
let store = useStore();
onMounted(() => {
  getdetails();
});

let servetitle = ref("");
const gettitle = () => {
  serveTitile().then((res) => {
    servetitle.value = res.data.title;
  });
};
gettitle();
let dialogVisible = ref(false);
const godialog = () => {
  dialogVisible.value = !dialogVisible.value;
};

let obj = reactive({
  phone: "",
  username: "",
  school: "",
  need: "",
});

let details = reactive({ value: {} });
const getdetails = () => {
  newsDetails({ news_id: $route.query.id }).then((res) => {
    details.value = res.data[0];
    details.value.content = details.value.content.replace(/&nbsp;/gi, "&ensp;");
    details.value.content = details.value.content.replace(/900/g, "100%");
  });
};

const sumbit = () => {
  if (obj.phone == "") {
    ElMessage.warning("请填写手机号");
    return;
  }
  if (obj.username == "") {
    ElMessage.warning("请填写用户名称");
    return;
  }
  if (obj.school == "") {
    ElMessage.warning("请填写学校名称");
    return;
  }
  if (obj.need == "") {
    ElMessage.warning("请填写需求");
    return;
  }

  cooperate({
    mobile_number: obj.phone,
    name: obj.username,
    school_name: obj.school,
    demand: obj.need,
    class_id: $route.query.id,
  }).then((res) => {
    $router.go(0);
  });
};
const goback = () => {
  $router.push({
    path: "/download",
    query: {
      class_id: $route.query.class_id,
      name: $route.query.name,
      type: $route.query.type,
    },
  });
};
</script>

<style lang="scss" scoped>
.pc {
  .header {
    width: 100%;
    height: 80px;
    background: linear-gradient(56deg, #23179d 6%, #4448ae 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    text-align: center;
    line-height: 80px;
    font-size: 22px;
    font-family: Alibaba PuHuiTi 2-75 SemiBold, Alibaba PuHuiTi 20;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .noticedetails {
    background: #f7f9ff;
    min-height: 900px;
    .container {
      padding-top: 100px;
      background: white;
      border-radius: 5px;
      margin: 0 auto;
      padding: 20px;
      min-height: 900px;
      .here-table {
        margin: 0 auto;
        border: 1px solid rgba(211, 117, 44, 0.42);
        border-radius: 2px;
        background: rgba(255, 77, 81, 0.04);
        padding: 0 20px;
        tr {
          display: table-row;
          vertical-align: inherit;
          border-color: inherit;
          td {
            text-align: left;
            &:nth-child(2n-1) {
              width: 90px;
              font-weight: 700;
              color: red;
              text-align: justify;
              word-spacing: 10px;
              line-height: 40px;
            }
            &:nth-child(2n) {
              width: 376px;
            }
          }
        }
      }
      :deep(.el-breadcrumb) {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #dadada;
        .el-breadcrumb__item {
          &:nth-child(1) {
            .is-link {
              color: #0c0d67 !important;
              font-size: 16px;
              font-family: Source Han Sans-Regular, Source Han Sans;
              font-weight: 400;
            }
          }
          &:nth-child(2) {
            .is-link {
              color: #0c0d67 !important;
              font-size: 16px;
              font-family: Source Han Sans-Regular, Source Han Sans;
              font-weight: 400;
            }
          }
        }
      }
      .title {
        height: 130px;

        text-align: center;
        font-size: 30px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #000000;
        position: relative;
        p {
          position: absolute;
          left: 0;
          top: 50%;
          width: 100%;
          text-align: center;
          transform: translateY(-50%);
          display: block;
        }
      }
      .info {
        color: #999;
        font-size: 15px;
        margin: 0 auto;
        margin-top: 15px;
        text-align: center;
        background: #f1f3f9;
        width: 928px;
        height: 44px;
        span {
          margin: 0 15px;
          font-size: 16px;
          line-height: 44px;
          font-family: Source Han Sans-Regular, Source Han Sans;
          font-weight: 400;
          color: #666666;
        }
      }
      .content {
        margin: 0 auto;
        margin-top: 20px;
        text-align: left;
        margin-bottom: 80px;
        // min-height: 300px;

        width: 928px;
      }
    }
    .breadcrumb {
      position: relative;
      .el-button {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translate(0, -50%);
        &:hover {
          background: white;
        }
      }
    }
  }
  .foot {
    width: 100%;
    height: 270px;
    background: url("../../../assets/footbg.png") no-repeat;
    background-size: 100% 100%;
    .top {
      height: 220px;
      width: 1400px;
      margin: 0 auto;
      box-sizing: border-box;
      padding-top: 40px;
      p {
        font-size: 18px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #ffffff;
        line-height: 36px;
      }
    }
    .bottom {
      height: 48px;
      border-top: 1px solid #dadada;
      p {
        line-height: 48px;
        text-align: center;
        font-size: 18px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  #refPlayerWrap {
    width: 80%;
    margin: 20px auto;
    height: 600px;
  }
  .cooperation {
    background: url("../../../assets/cooperationbg.png");
    width: 80px;
    height: 180px;
    text-align: center;
    color: white;
    text-align: center;
    line-height: 30px;
    padding-top: 25px;
    padding-left: 14px;
    cursor: pointer;
    position: fixed;
    right: 15px;
    top: 60%;
    border-radius: 40px;
    overflow: hidden;
    font-size: 22px;
    font-family: Source Han Sans-Regular, Source Han Sans;
    font-weight: 700;
  }
}

.mob {
  .header {
    width: 100%;
    height: 5rem;
    background: linear-gradient(56deg, #23179d 6%, #4448ae 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    text-align: center;
    line-height: 5rem;
    font-size: 1.875rem;
    font-family: Alibaba PuHuiTi 2-75 SemiBold, Alibaba PuHuiTi 20;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .noticedetails {
    background: #f7f9ff;
    min-height: 56.25rem;
    .container {
      width: 46.875rem;
      padding-top: 6.25rem;
      background: white;
      border-radius: 5px;
      margin: 0 auto;
      padding: 1.25rem;
      min-height: 37.5rem;

      :deep(.el-breadcrumb) {
        height: 4.125rem;
        line-height: 4.125rem;
        border-bottom: 1px solid #dadada;
        margin-bottom: 1.875rem;
        .el-breadcrumb__item {
          &:nth-child(1) {
            .is-link {
              color: #0c0d67 !important;
              font-size: 1rem;
              font-family: Source Han Sans-Regular, Source Han Sans;
              font-weight: 400;
              font-size: 16px;
            }
          }
          &:nth-child(2) {
            .is-link {
              color: #0c0d67 !important;
              font-size: 1rem;
              font-family: Source Han Sans-Regular, Source Han Sans;
              font-weight: 400;
              font-size: 16px;
            }
          }
        }
      }
      .title {
        min-height: 14.125rem;

        text-align: center;
        font-size: 2.5rem;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #000000;
        position: relative;
        p {
          position: absolute;
          left: 0;
          top: 50%;
          width: 100%;
          text-align: center;
          transform: translateY(-50%);
          display: block;
        }
      }
      .info {
        margin-top: 3.125rem;
        color: #999;
        font-size: 1.25rem;
        margin: 0 auto;
        margin-top: 0.9375rem;
        text-align: center;
        height: 8rem;
        border-bottom: 2px solid #ccc;
        span {
          margin: 0 0.9375rem;
          font-size: 2rem;
          line-height: 4rem;
          font-family: Source Han Sans-Regular, Source Han Sans;
          font-weight: 400;
          color: #666666;
        }
      }
      .content {
        margin: 0 auto;
        padding-top: 3.125rem;
        text-align: left;
        margin-bottom: 5rem;
        // min-height: 300px;

        font-size: 2.2rem;
        :deep(img) {
          width: 100% !important;
        }
        :deep(p) {
          margin-bottom: 2.2rem;
          line-height: 2.2rem;
        }
      }
    }
  }
  .foot {
    background: #0c0d67;
    width: 46.875rem;
    height: 15.625rem;
    color: rgb(245, 245, 245);
    font-size: 1.125rem;
    padding: 0 1.5rem;
    padding-top: 2.1875rem;
    line-height: 1.875rem;
  }
  #refPlayerWrap {
    width: 100%;
    margin: 20px auto;
    height: 25rem;
  }
}
</style>
